<template>
  <div id="app">
    <h1>计时器</h1>
    <div>{{ time }}</div>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">暂停</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      time: '00:00:00',
      interval: null,
      seconds: 0
    };
  },
  methods: {
    startTimer() {
      if (!this.interval) {
        this.interval = setInterval(() => {
          this.seconds++;
          this.updateTime();
        }, 1000);
      }
    },
    stopTimer() {
      clearInterval(this.interval);
      this.interval = null;
    },
    resetTimer() {
      this.stopTimer();
      this.seconds = 0;
      this.updateTime();
    },
    updateTime() {
      const hours = Math.floor(this.seconds / 3600);
      const minutes = Math.floor((this.seconds - (hours * 3600)) / 60);
      const seconds = this.seconds % 60;
      this.time = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
div {
  font-size: 2em;
  margin-bottom: 20px;
}


button {
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
}
</style>